<template>
	<div id="note_Chapter" class="note_Chapter">
		<el-container>
			<el-header style="padding: 0px 20px 0px 0px ;">
				<el-card class="box-card">
					<div class="text item">
						<el-button type="primary" icon="add" @click="insertOperate">新增</el-button>
						<el-button type="primary" icon="edite" @click="editOperate">修改</el-button>
						<el-button type="primary" icon="delete" @click="deleteOperate">删除</el-button>
					</div>
				</el-card>
			</el-header>
			<el-container>
				<el-aside class="aside">
					<el-card class="box-card" style=" min-height: 400px;">
						<div slot="header" class="clearfix">
							<span>分类管理</span>
						</div>
						<div class="text item">
							<el-tree :data="data" default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps"
							 @node-click="handleNodeClick">
							</el-tree>
						</div>
					</el-card>
				</el-aside>
				<el-main class="maintext">
					<el-card class="box-card" style="height: 400px;">
						<div slot="header" class="clearfix">
							<span>详情</span>
						</div>
						<div class="text item">
							<div class="form-box">
								<el-form ref="mainTree" :model="mainTree" label-width="80px">
									<el-form-item label="分类名称:">
										<el-form-item>{{mainTree.title}}</el-form-item>
									</el-form-item>
									<el-form-item label="文章类别:">
										<el-form-item>{{mainTree.category_title}}</el-form-item>
									</el-form-item>
									<el-form-item label="分类隐私:">
										<el-form-item>{{mainTree.article_category_model|article_category_model_format}}</el-form-item>
									</el-form-item>
									<!-- <el-form-item label="上级分类:">
										<el-form-item>{{mainTree.article_category_pid}}</el-form-item>
									</el-form-item> -->
									<el-form-item label="摘要:">
										<el-form-item>{{mainTree.summary}}</el-form-item>
									</el-form-item>
									<el-form-item label="内容描述:">
										<el-form-item>{{mainTree.content}}</el-form-item>
									</el-form-item>
								</el-form>
							</div>
						</div>
					</el-card>
				</el-main>
			</el-container>
		</el-container>

		<!-- 编辑弹出框 -->
		<el-dialog :title="editTitle" :visible.sync="editVisible" width="50%">
			<el-form ref="editForm" :rules="rules" :model="editForm" label-width="100px">
				<el-form-item label="分类名称:" prop="title">
					<el-input v-model="editForm.title"></el-input>
				</el-form-item>
				<el-form-item label="文章类别:" prop="category_id">
					<el-select v-model="editForm.category_id" placeholder="请选择" :disabled="category_id_disabled">
						<el-option v-for="item in noteTypeOptions" :key="item.article_category_id" :label="item.title" :value="item.article_category_id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="摘要:" prop="summary">
					<el-input v-model="editForm.summary" type="textarea" :rows="2"></el-input>
				</el-form-item>
				<el-form-item label="内容描述:" prop="content">
					<el-input v-model="editForm.content" type="textarea" :rows="2"></el-input>
				</el-form-item>
				<el-form-item label="排序编码:" prop="order_number">
					<el-input-number v-model="editForm.order_number"></el-input-number>
				</el-form-item>
				<el-form-item label="上级分类:">{{title_pid}}<i class="el-icon-delete" @click="clear_title_pid()"></i>
				</el-form-item>
				<el-form-item label="分类隐私" prop="article_category_model">
					<el-radio-group v-model="editForm.article_category_model">
						<el-radio label="1">公开</el-radio>
						<el-radio label="0">私有</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="图片">
					<el-upload :action="imgUrl" list-type="picture-card" limit="1" multiple="false" :on-preview="handlePictureCardPreview"
					 :on-remove="handleRemove" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :file-list="file_list">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible" size="tiny">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit('editForm')">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 删除提示框 -->
		<el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
			<div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="delVisible = false">取 消</el-button>
				<el-button type="primary" @click="deletefun">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		constHelp
	} from '../../common/contant';
	import common from '../../common/common.js'
	export default {
		name: 'sys_menu',
		data() {
			return {
				url: {
					getTree: constHelp['WEBAPIURL'] + '/articleCategory/get_article_category_tree_all_list', // 获取文章类型列表
					insert: constHelp['WEBAPIURL'] + '/articleCategory/insert_article_category', // 添加文章类型
					update: constHelp['WEBAPIURL'] + '/articleCategory/update_article_category', // 更新文章类型
					delete: constHelp['WEBAPIURL'] + '/articleCategory/update_delete_article_category',
					get_article_category_all_list_Url: constHelp['WEBAPIURL'] + '/articleCategory/get_article_category_all_list', // 获取文章类型列表
				},
				mainTree: {},
				mainTreeData: [],
				noteTypeOptions: [], //下拉框数据,
				selectedOptions: [],
				selectedOptions2: [],
				defaultProps: {
					children: 'children',
					label: 'title'
				},
				// 编辑用
				insertAndEdit: 0,
				deleteItem: {}, // 删除
				editVisible: false, //菜单编辑框
				editTitle: "新增菜单", //菜单编辑框标题
				editForm: {},
				rules: {
					title: [{
							required: true,
							message: '分类名称',
							trigger: 'blur'
						},
						{
							max: 50,
							message: '长度在50个字符',
							trigger: 'blur'
						}
					],
					category_id: [{
						required: true,
						message: '请选择文章类别!',
						trigger: 'change'
					}],
					summary: [{
						required: true,
						message: '请输入摘要!',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入内容描述!',
						trigger: 'blur'
					}],
					order_number: [{
						required: true,
						message: '请输入排序!',
						trigger: 'blur'
					}],
					article_category_model: [{
						required: true,
						message: '请选择分类隐私类型!',
						trigger: 'blur'
					}]
				},
				noteTreeOptions: "",
				// 删除用
				delVisible: false,
				category_id_disabled: false,
				title_pid: "",
				imageUrl: '',
				dialogImageUrl: '',
				dialogVisible: false,
				imgUrl: constHelp['WEBAPIURL'] + '/blogManage/upload_icon',
				file_list: [],
				userInfo: {},

			};
		},
		created() {
			let userInfo_string = localStorage.getItem("UserInfo");
			if (!common.IsNull(userInfo_string)) {
				this.userInfo = JSON.parse(userInfo_string);
			}
			this.getSysMenuTree();
			this.get_article_category_all_list_Url();
		},
		filters: {
			article_category_model_format(value) {
				if (value == "0") {
					return "私有"
				} else if (value == "1") {
					return "公开"
				}
			}
		},
		computed: {
			data() {
				return this.mainTreeData;
			}
		},
		methods: {
			// 获取菜单树
			getSysMenuTree() {
				this.$axios.post(this.url.getTree, {
					user_id: this.userInfo.user_Id
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null && res.data.data != "") {
						this.mainTreeData = res.data.data;
					}
				})
			},
			// 取得文章类别
			get_article_category_all_list_Url() {
				this.$axios.post(this.url.get_article_category_all_list_Url, {
					user_id: this.userInfo.user_Id
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null && res.data.data != "") {
						this.noteTypeOptions = res.data.data;
					}
				})
			},
			handleNodeClick(data, node, vuecomponent) {
				this.mainTree = data;
			},
			insertOperate() {
				this.editVisible = true; //菜单编辑框
				this.editTitle = "添加分类"; //菜单编辑框标题
				this.editForm = {}
				this.file_list = []
				// this.editForm.title_pid = this.mainTree.title
				this.title_pid = this.mainTree.title;
				if (!common.IsNull(this.mainTree.article_category_id)) {
					this.editForm.article_category_pid = this.mainTree.article_category_id
					this.editForm.category_id = this.mainTree.category_id
					this.category_id_disabled = true;
				} else {
					this.category_id_disabled = false;
				}
				this.insertAndEdit = 0;
			},
			editOperate() {
				if (!common.IsNull(this.mainTree.article_category_id)) {
					this.editVisible = true; //菜单编辑框
					this.editTitle = "修改分类"; //菜单编辑框标题
					this.editForm = {
						article_category_id: this.mainTree.article_category_id,
						title: this.mainTree.title,
						summary: this.mainTree.summary,
						content: this.mainTree.content,
						order_number: this.mainTree.order_number,
						article_category_pid: this.mainTree.article_category_id,
						category_id: this.mainTree.category_id,
						title_pid: this.mainTree.title_pid,
						article_category_model: this.mainTree.article_category_model,
					}
					this.file_list = [{
						url: this.mainTree.icon
					}]
					this.title_pid = this.mainTree.title_pid;
					this.insertAndEdit = 1;
				} else {
					this.$message.error('请选择分类!');
				}
			},
			deleteOperate() {
				if (!common.IsNull(this.mainTree.article_category_id)) {
					this.delVisible = true;
					this.deleteItem = this.mainTree;
				} else {
					this.$message.error('请选择分类!');
				}
			},
			// 清空上级分类
			clear_title_pid() {
				// debugger
				this.editForm.article_category_pid = null;
				this.title_pid = "";
			},
			// 删除方法
			deletefun() {
				this.$axios.post(this.url.delete, this.deleteItem, {
					withCredentials: true
				}).then((res) => {
					this.$message.success('删除成功');
					this.getSysMenuTree();
					this.delVisible = false;
				}).catch((response) => {
					this.$message.success('删除失败');
				})
			},
			getCheckedNodes() {
				console.log(this.$refs.tree.getCheckedNodes());
			},
			getCheckedKeys() {
				console.log(this.$refs.tree.getCheckedKeys());
			},
			setCheckedKeys() {
				this.$refs.tree.setCheckedKeys([3]);
			},
			resetChecked() {
				this.$refs.tree.setCheckedKeys([]);
			},
			handleChange(value) {},
			saveEdit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.editForm.type = "1";
						this.editForm.user_id = this.userInfo.user_Id
						this.editForm.icon = this.imageUrl
						console.log(this.editForm)
						var saveUrl = this.insertAndEdit == 0 ? this.url.insert : this.url.update;
						this.$axios.post(saveUrl, this.editForm, {
							withCredentials: true
						}).then((res) => {
							if (res.data.err === "0") {
								this.getSysMenuTree();
								if (this.insertAndEdit == 0) {
									this.editVisible = false;
									this.$message.success(`添加成功`);
								} else {
									this.editVisible = false;
									this.$message.success(`修改成功`);
								}
							}
						}).catch((response) => {
							this.$message.success('修改失败');
						})
					} else {
						return false;
					}
				});
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},

			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			handleAvatarSuccess(response, file, fileList) {
				this.imageUrl = response.data.url;
			},
		},
	};
</script>
<style>
	.note_Chapter .aside {
		padding-top: 20px;
		/*color: #333;*/
	}

	.note_Chapter .maintext {
		padding-top: 20px;
		width: 1000px;
	}
</style>
